<template>
  <div class="container">
    <div class="bg-color-white pad-t-5 pad-b-5">
      <van-tabs :active="activeIndex" @change="tabClick" color="#f8c400" :border="false">
        <van-tab title="全部" title-style="font-size:32rpx;"></van-tab>
        <van-tab title="待审核" title-style="font-size:32rpx;"></van-tab>
        <van-tab title="已到账" title-style="font-size:32rpx;"></van-tab>
        <van-tab title="未通过" title-style="font-size:32rpx;"></van-tab>
      </van-tabs>
    </div>
    <div class="panel mar-t-10">
      <div v-for="(item, index) in listData" :key="index" class="pad-10">
        <div class="flex border-b v-align-c">
          <div class="flex-item">
            <text>{{ item.applyTime }}</text>
          </div>
          <div class="flex-item align-r">
            ¥ {{ item.applyAmount }}
          </div>
          <div class="flex-item align-r">
            {{ item.takeOutStatus===0 ? '待审核' : ''}}
            {{ item.takeOutStatus===1 ? '已到账' : ''}}
            {{ item.takeOutStatus===2 ? '未通过' : ''}}
            {{ item.takeOutStatus===3 ? '提现中' : ''}}
          </div>
        </div>
      </div>
      <div v-if="listData.length===0" class="align-c mar-t-30 pad-30">
        <img v-if="fileSpace" mode="widthFix" class="width-153 height-75 mar-t-30" :src="fileSpace + '/images/2-0-kong.png'"/>
        <div class="pad-t-20 font-14 font-gray">空空如也</div>
      </div>
    </div>
    <div class="pad-30"></div>
  </div>
</template>

<script>
  import {
    pageTakeOut
  } from '@/api/personal'

  export default {
    data() {
      return {
        listData: [],
        activeIndex: 0,
        tabStatus: []
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    onShow() {
      this.tabClick()
    },
    onReachBottom() {
      if (!this.tabStatus[this.activeIndex].pullLoad.finished) {
        this.initTakeOut(this.activeIndex)
      }
    },
    methods: {
      initTakeOut(index) {
        const _this = this.tabStatus[index]
        this.$utils.showToast({
          title: '数据加载中',
          icon: 'loading'
        })
        pageTakeOut(_this.listQuery).then(response => {
          if (response.isError) return
          this.$pt.hideToast()
          response.data.records.forEach(item => {
            item.applyTime = item.applyTime.replace(' ', '\n')
            this.listData.push(item)
          })
          _this.listData = this.listData
          // 翻页+1
          _this.listQuery.currentPage++
          if (this.listData.length === 0 || this.listData.length >= response.data.total) {
            _this.pullLoad.finished = true
          }
        }).catch(() => {
        })
      },
      // 切换类目
      tabClick(e) {
        // console.log(e)
        let index = 0
        if (e) {
          index = e.mp.detail.index
        }
        this.activeIndex = index
        if (!this.tabStatus[index]) {
          // 初始化类目数据
          this.tabStatus[index] = {
            listData: [],
            listQuery: {
              takeOutStatus: index === 0 ? '' : index - 1,
              applyUserId: this.getCustomerId,
              currentPage: 1,
              size: 20
            },
            pullLoad: {
              loading: false,
              finished: false
            }
          }
          this.listData = []
          this.initTakeOut(index)
        } else {
          this.listData = this.tabStatus[index].listData
        }
      }
    }
  }
</script>

<style scoped>

</style>
